<!--suppress ALL -->
<template>
  <div>
    <div id="input">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-radio-group v-model="query.groupBy">
            <el-radio-button label="userId"/>
            <el-radio-button label="memberId"/>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="query.queryId"
            placeholder="请输入ID"
            clearable/>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="query.queryModule"
            placeholder="请输入module"
            clearable/>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="query.queryDate"
            type="daterange"
            range-separator=" 至 "
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="myChart" :style="{width: '1600px', height: '900px',padding:'20px'}"/>
    <div>
      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 30, 40,50,100]"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
    <div id="mytable">
      <el-table
        :data="echartsData.source"
        stripe
        style="width: 100%">
        <!-- eslint-disable-next-line -->
        <el-table-column
          v-for="header of echartsData.dimensions"
          :prop= "header"
          :label="header"
          width="180"/>
      </el-table>
    </div>
  </div>
</template>

<script>
var echarts = require('echarts');
import request from '@/utils/request';

export default {
  name: 'User',
  data() {
    return {
      chart: null,
      // 查询参数
      query: {
        groupBy: 'userId',
        queryId: '',
        queryModule: '',
        queryDate: []
      },
      // 分页数据
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      // echarts数据
      echartsData: {
        dimensions: ['user', '离线', '近在线', '在线', '热度', '历史', '时效', '标签'],
        source: []
      }
    };
  },
  mounted() {
    this.initCharts();
    this.fectchData();
  },

  methods: {
    initCharts() {
      this.chart = echarts.init(document.getElementById('myChart'));
      this.setOptions();
    },
    setOptions() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        dataset: {
          dimensions: this.echartsData.dimensions,
          source: this.echartsData.source
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: {
              show: true, readOnly: true
            },
            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            axisLabel: { interval: 0 },
            axisTick: { show: false }
          }
        ],
        yAxis: {},
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: [0]
          },
          {
            type: 'slider',
            show: true,
            xAxisIndex: [0]
          }
        ],
        series: [
          { type: 'bar' },
          { type: 'bar' },
          { type: 'bar' },
          { type: 'bar' },
          { type: 'bar' },
          { type: 'bar' },
          { type: 'bar' }
        ]
      };
      this.chart.setOption(option);
    },
    // 分页改变
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.fectchData();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fectchData();
    },
    // 点击搜索
    search() {
      this.page.currentPage = 1;
      this.fectchData();
    },
    fectchData() {
      request({
        url: '/v1/news-recommend-historys/count/page',
        method: 'post',
        data: {
          groupBy: this.query.groupBy,
          id: this.query.queryId,
          module: this.query.queryModule,
          beginDate: this.query.queryDate[0],
          endDate: this.query.queryDate[1],
          currentPage: this.page.currentPage,
          pageSize: this.page.pageSize
        }
      }).then(response => {
        this.parseSerierData(response.data);
        this.setOptions();
      });
    },
    parseSerierData(data) {
      var seriesData = [];
      for (var row of data.rows) {
        var userData = {};
        // 一个用户的所有来源
        var sourceCounts = row.sourceCount;
        userData.user = row.id;
        for (var sourceCount of sourceCounts) {
          userData[sourceCount.recommendSourceName] = sourceCount.count;
        }
        seriesData.push(userData);
      }
      this.echartsData.source = seriesData;
      this.page.total = data.total;
    }
  }
};
</script>

<style scoped>
  .components-container {
    position: relative;
    height: 100vh;
    padding: 20px;
  }
</style>
